<extend name="Layout/application"/>
<block name="css">
    <link rel="stylesheet" href="__PUBLIC__/select2/css/select2.min.css">
    <link rel="stylesheet" href="__PUBLIC__/bootstrap-colorpicker/css/bootstrap-colorpicker.min.css">
    <link rel="stylesheet" href="__PUBLIC__/bootstrap-datepicker/css/bootstrap-datepicker.min.css">
</block>
<block name="content">
    <div class="row">
        <div class="col-md-12">

            <div class="row">
                <div class="col-md-8">
                    <div class="page-header">
                        <h3>系统首页</h3>
                    </div>
                </div>
            </div>

            <div class="row">
                <div class="col-md-10">
                    <div class="panel panel-default">
                        <div class="panel-heading">文章信息</div>
                        <form role="form" class="form-horizontal" method="post" action="{{:U('store')}}">
                            <div class="panel-body">
                                <!-- Nav tabs -->
                                <ul class="nav nav-tabs" role="tablist">
                                    <li role="presentation" class="active"><a href="#home" role="tab" data-toggle="tab">文章选项</a>
                                    </li>
                                    <li role="presentation"><a href="#profile" role="tab" data-toggle="tab">文章内容</a>
                                    </li>
                                </ul>

                                <!-- Tab panes -->
                                <div class="tab-content">

                                    <input type="hidden" id="article_category_id" value="{{$article.category_id}}">
                                    <!--<input type="hidden" value="{{$article.content}}" id="article_content">-->
                                    <input type="hidden" name="id" value="{{$article.id}}">
                                    <div role="tabpanel" class="tab-pane active" id="home">
                                        <div class="form-group">
                                            <label for="inputEmail3" class="col-sm-2 control-label">文章栏目</label>
                                            <div class="col-sm-10">
                                                <select class="form-control select" name="category_id" id="inputEmail3">
                                                    <!--<option class="abc"><if condition="$article.id eq 0">请选择栏目<else />{{$article.category.name}}</if></option>-->
                                                    <volist name="categories" id="c">
                                                        <option class="option" value="{{$c.id}}" <eq name="c.id" value="$article.category_id">selected</eq>>
                                                            <for start="1" end="$c['level']*3">&nbsp;&nbsp;</for>
                                                            {{$c.name}}
                                                        </option>
                                                    </volist>
                                                </select>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label for="inputPassword3" class="col-sm-2 control-label">文章标题</label>
                                            <div class="col-sm-10">
                                                <input type="text" class="form-control" value="{{$article.title}}"
                                                       name="title" id="inputPassword3" placeholder="请输入标题">
                                            </div>
                                        </div>
                                        <div class="form-group" id="color">
                                            <label for="cp2" class="col-sm-2 control-label">标题颜色</label>
                                            <div class="col-sm-10">
                                                <div id="cp2" class="input-group colorpicker-component">
                                                    <input type="text" name="title_color"
                                                           value="{{$article.title_color}}" class="form-control"/>
                                                    <span class="input-group-addon"><i></i></span></div>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label">缩略图</label>
                                            <div class="col-sm-10">
                                                <input type="text" id="thumb" value="{{$article.thumb}}"
                                                       class="span5 form-control" name="thumb">
                                            </div>


                                            <div class="col-sm-10 col-lg-offset-2">
                                                <button type="button" class="btn btn-success"
                                                        onclick="BrowseServer('thumb','img_show')">新增
                                                </button>
                                                <button type="button" class="btn btn-danger">删除</button>
                                            </div>
                                        </div>
                                        <div class="form-group">
                                            <label class="col-sm-2 control-label">预览</label>
                                            <div class="col-sm-10">
                                                <img src="{{$article.thumb}}" id="img_show" style="max-height: 120px;"/>
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <div class="col-sm-10 col-sm-offset-2">
                                                <button type="button" class="btn btn-primary" id="more_files">添加更多
                                                </button>
                                            </div>
                                        </div>
                                        <div class="files">
                                            <volist name="article.file" id="f">
                                            <div class="form-group">
                                                <label class="col-sm-2 control-label">附件（{{$i}}）</label>
                                                <div class="col-sm-10">
                                                    <input type="text" id="file1" class="span5 form-control"
                                                           name="file[]" value="{{$f}}">
                                                </div>
                                                <div class="col-sm-10 col-lg-offset-2">
                                                    <button type="button" class="btn btn-success"
                                                            onclick="BrowseServerFile('file1')">上传
                                                    </button>
                                                    <button type="button" class="btn btn-danger deletefile1">删除</button>
                                                </div>
                                            </div>
                                            </volist>
                                        </div>

                                        <div class="form-group">
                                            <label for="datetimepicker" class="col-sm-2 control-label">创建时间</label>
                                            <div class="col-sm-10">
                                                <div id="datetimepicker">
                                                    <input class="form-control span2" name="time" size="16" type="text"
                                                           value="{{$article.time|date='Y-m-d H:i:s',###}}">
                                                </div>
                                            </div>
                                        </div>

                                        <div class="form-group">
                                            <label for="inputPassword7" class="col-sm-2 control-label">PIC_URL</label>
                                            <div class="col-sm-10">
                                                <input type="text" class="form-control" value="{{$article.picture_url}}"
                                                       name="picture_url" id="inputPassword7" placeholder="请输入标题">
                                            </div>
                                        </div>


                                    </div>
                                    <div role="tabpanel" class="tab-pane" id="profile">
                                        <textarea name="content" class="form-control">{{$article.content}}</textarea>
                                    </div>

                                    <button type="submit" class="btn btn-primary">修改</button>
                                    <button type="button" class="btn btn-success">返回</button>
                                </div>

                            </div>
                        </form>
                    </div>
                </div>


                <div class="col-md-2">
                    <div class="list-group">
                        <a href="javascript: void 0;" class="list-group-item list-group-item-info sort_category">
                            <span class="glyphicon glyphicon-plus" aria-hidden="true"></span> 新增 (add)
                        </a>

                        <a href="javascript: void 0;" class="list-group-item list-group-item-info sort_category">
                            <span class="glyphicon glyphicon-trash" aria-hidden="true"></span> 删除 (sort)
                        </a>
                    </div>
                </div>
            </div>
        </div>
    </div>
</block>
<block name="js">
    <script type="text/javascript" src="__PUBLIC__/ckeditor/ckeditor.js"></script>
    <script type="text/javascript" src="__PUBLIC__/ckfinder/ckfinder.js"></script>

    <script type="text/javascript" src="__PUBLIC__/select2/js/select2.min.js"></script>
    <script type="text/javascript" src="__PUBLIC__/select2/js/i18n/zh-CN.js"></script>

    <script type="text/javascript" src="__PUBLIC__/bootstrap-colorpicker/js/bootstrap-colorpicker.min.js"></script>

    <script type="text/javascript" src="__PUBLIC__/bootstrap-datepicker/js/bootstrap-datepicker.min.js"></script>
    <script type="text/javascript" src="__PUBLIC__/bootstrap-datepicker/locales/bootstrap-datepicker.zh-CN.min.js"></script>

    <script type="text/javascript">
        CKEDITOR.replace('content',
                {
                    filebrowserBrowseUrl: '__PUBLIC__/ckfinder/ckfinder.html',
                    filebrowserImageBrowseUrl: '__PUBLIC__/ckfinder/ckfinder.html?type=Images',
                    filebrowserFlashBrowseUrl: '__PUBLIC__/ckfinder/ckfinder.html?type=Flash',
                    filebrowserUploadUrl: '__PUBLIC__/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Files',
                    filebrowserImageUploadUrl: '__PUBLIC__/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Images',
                    filebrowserFlashUploadUrl: '__PUBLIC__/ckfinder/core/connector/php/connector.php?command=QuickUpload&type=Flash'
                });
        //上传图片
            function BrowseServer(thumb, img_show) {
            var finder = new CKFinder();

            //当选中图片时执行的函数
            finder.selectActionFunction = function (fileUrl) {
                $("#" + thumb).val(fileUrl);
                $("#" + img_show).attr("src", "" + fileUrl + "");
            }

            finder.popup();//调用窗口
        }

        //上传附件
        function BrowseServerFile(file) {
            var finder = new CKFinder();

            //当选中图片时执行的函数
            finder.selectActionFunction = function (fileUrl) {
                $("#" + file).val(fileUrl);
            }
            finder.popup();//调用窗口
        }


        $(function () {
            $('select').select2();

            $('#cp2').colorpicker();


            $('.span2').datepicker({
                format: "yyyy-mm-dd",
                language: 'zh-CN',
                todayHighlight: true
            });

            var index = 2;
            $("#more_files").click(function () {
                var length = $(".files").children().length;
                if(length==5){
                    alert("只能上传5个附件！")
                    return false;
                }
                index=length+1;
                var html = '<div class="form-group"> ' +
                        '<label class="col-sm-2 control-label">附件（' + index + '）</label> ' +
                        '<div class="col-sm-10"> ' +
                        '<input type="text" id="file' + index + '" class="span5 form-control"' +
                        'name="file[]"> ' +
                        '</div> ' +
                        '<div class="col-sm-10 col-lg-offset-2"> ' +
                        '<button type="button" class="btn btn-success"' +
                        'onclick="BrowseServerFile(\'file' + index + '\')">上传 ' +
                        '</button> ' +
                        '<button type="button" class="btn btn-danger delete_file">删除</button> ' +
                        '</div> ' +
                        '</div>';
                index++;
                $(".files").append(html);
            });

            //删除第一个附件
            $(".deletefile1").click(function () {
                $(this).parents(".form-group").find("input").val('');
            });

            //动态删除其他附件
            $(document).on('click','.delete_file',function () {
                $(this).parents(".form-group").remove();
            })

            $(".return").click(function () {
                location.href=document.referrer;
            })
        })
    </script>
</block>